  const sendMessage = async (msg) => {
    return await chrome.runtime.sendMessage(JSON.stringify(msg));
  }
  
  const createEle = (obj) => {
    const divEle = document.createElement("div");

    if(obj.inputs) {
      for(o of obj.inputs) {
        const inputEle = document.createElement("input");
        inputEle.id = `${obj.key}-${o.label}`;
        inputEle.value = o.defaultVal;
        divEle.append(inputEle);
      }
    }
   
    const btnEle = document.createElement("button");
    btnEle.id = `${obj.key}-button`;
    btnEle.innerText = obj.key;
    btnEle.addEventListener("click", async () => {
      const msg = {key: obj.key, params:{}};
      if(obj.inputs) {
        for(o of obj.inputs) {
          const inputEle = document.getElementById(`${obj.key}-${o.label}`);
          msg.params[o.label] = inputEle.value;
        }
      }
      const res = await sendMessage(msg);
      document.getElementById(`${obj.key}-p`).innerText = res;
    })
    
    divEle.append(btnEle);

    const pEle = document.createElement("p");
    pEle.id = `${obj.key}-p`;
    divEle.append(pEle);

    document.getElementById("test-content").append(divEle);
  }
  
  createEle({
    key: "createTab", 
    inputs: [{
      label: "url",
      defaultVal: "https://www.baidu.com"
  }]});

  createEle({
    key: "removeTab", 
    inputs: [{
      label: "title",
      defaultVal: "百度一下，你就知道"
  }]});


  createEle({
    key: "getTab", 
    inputs: [{
      label: "title",
      defaultVal: "百度一下，你就知道"
  }]});


  
  createEle({
    key: "reloadTab", 
    inputs: [{
      label: "title",
      defaultVal: "百度一下，你就知道"
  }]});

  createEle({
    key: "switchTab", 
    inputs: [{
      label: "title",
      defaultVal: "百度一下，你就知道"
  }]});


createEle({
  key: "getEle", 
  inputs: [{
    label: "selector",
    defaultVal: "邮箱账号或手机号码",
  },{
    label: "title",
    defaultVal: "163网易免费邮-你的专业电子邮局",
  }]});

createEle({
key: "getTabs", 
inputs: []});

  
  



  
  
  


  